<template>
<div class="user">
<!-- 头部导航栏 -->
<JdNavbar title="个人中心" leftText='' rightText='...' />

<!-- 中心内容区域 start -->
<article>
  <header>
    <!-- 用户的基本信息 start -->
    <div class="userSet">
      <div class="left">
        <div class="avater">
          <img :src="avater" alt="">
          <div class="nickname" v-text="nickname"></div>
        </div>
        <div class="userinfo">
          <div class="id">J_skmr790</div>
          <div class="tag">
            <span>京享值</span>
            <span>小白信用100.00 ></span>
          </div>
        </div>
      </div>
      <div class="right">
        <span @click="logout"><van-icon name="setting" /></span>
      </div>
    </div>
    <!-- 用户的基本信息 end -->

    <!-- 用户的购物记录 start -->
    <div class="userCenter">
      <div>
        <span>1</span>
        <span>商品收藏</span>
      </div>
      <div>
        <span>5</span>
        <span>店铺收藏</span>
      </div>
      <div>
        <span>1</span>
        <span>我的足迹</span>
      </div>
    </div>
    <!-- 用户的购物记录 end -->

    <!-- 会员购 -->
    <div class="userFooter">
      <div class="content">
        <img :src="$img.plus" alt="">
      </div>
    </div>
  </header>

  <div class="order">
    <div>
      <img :src="$img.img1" alt="">
      <span>代付款</span>
    </div>
    <div>
      <img :src="$img.img2" alt="">
      <span>代收货</span>
    </div>
    <div>
      <img :src="$img.img3" alt="">
      <span>退款 / 售后</span>
    </div>
    <div>
      <img :src="$img.img4" alt="">
      <span>全部订单</span>
    </div>
  </div>

  <div class="money">
    <div>
      <span>0</span>
      <span>优惠券</span>
    </div>
    <div>
      <span>开通免息</span>
      <span>白条</span>
    </div>
    <div>
      <span>0</span>
      <span>京东</span>
    </div>
    <div>
      <span>0</span>
      <span>红包</span>
    </div>
    <div>
      <img :src="$img.img5" alt="">
      <span>我的资产</span>
    </div>
  </div>

  <footer>
    <div class="title">
      工具与服务
    </div>
    <div class="serve">
      <div>
        <img :src="$img.server" alt="">
        <span>客服服务</span>
      </div>
      <div>
        <img :src="$img.server" alt="">
        <span>代收货</span>
      </div>
      <div>
        <img :src="$img.server" alt="">
        <span>退款 / 售后</span>
      </div>
      <div>
        <img :src="$img.server" alt="">
        <span>全部订单</span>
      </div>
      <div>
        <img :src="$img.server" alt="">
        <span>代付款</span>
      </div>
      <div>
        <img :src="$img.server" alt="">
        <span>代收货</span>
      </div>
      <div>
      </div>
      <div>
        
      </div>
    </div>
  </footer>
</article>
<!-- 中心内容区域 end -->

<!-- 底部的切换栏 -->
<Tabbar />
</div>
</template>

<script>
import { Tabbar, JdNavbar } from '@/components'

export default {
  name: 'user',
  components: {
    Tabbar,
    JdNavbar
  },
  data() {
    return {
      avater: '',
      nickname: '',
      userinfo: { 
        id: 1, nickname: '时空梦人', avater: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1279783959,181466025&fm=26&gp=0.jpg' 
      }
      
    }
  },

  methods: {
    init () {
      if (localStorage.getItem('token')) {
        this.avater = this.userinfo.avater
        this.nickname = this.userinfo.nickname
      }
    },

    logout () {
      if (localStorage.getItem('token')) {
        this.$dialog.comfirm({
          title: 'tips',
          message: '确定退出吗?'
        }).then(() => {
          localStorage.removeItem('token')
        })
      }
    }
  },

  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>

.user {
  width: 100%;
  height: 100%;
  article {
    width: 100%;
    background-color: #f7f7f7;
    box-sizing: border-box;
    header {
      width: 100%;
      height: 4.8rem;
      background: linear-gradient(to bottom right, #ff215f, #fc664e);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 .24rem;
      box-sizing: border-box;
      .userSet {
        width: 100%;
        height: 1.6rem;
        display: flex;
        justify-content: space-between;
        .left {
          width: 6.533333rem;
          height: 1.6rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .avater {
            width: 1.866667rem;
            height: 1.466667rem;
            text-align: center;
            position: relative;
            img {
              width: 1.4rem;
              height: 1.4rem;
              border-radius: 50%;
            }
            .nickname {
              width: 1.866667rem;
              height: .4rem;
              position: absolute;
              bottom: 0;
              border-radius: .2rem;
              background: rgba(0, 0, 0, .5);
              font-size: .32rem;
              line-height: .4rem;
              color: #fff;
              text-align: center;
            }
          }
          .userinfo {
            width: 4.533333rem;
            height: 1.466667rem;
            .id {
              height: .733333rem;
              line-height: .733333rem;
              font-size: .4rem;
              color: #fff;
            }
            .tag {
              height: .733333rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                padding: .106667rem .213333rem;
                border-radius: .266667rem;
                background: rgba(0, 0, 0, .5);
                font-size: .24rem;
                color: #fff;
                text-align: center;
              }
            }
          }
        }
        .right {
          width: .8rem;
          height: 1.6rem;
          .van-icon {
            font-size: .56rem;
            color: #fff;
          }
        }
      }

      .userCenter {
        width: 100%;
        height: 1.333333rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        >div {
          width: 1.466667rem;
          height: 1.333333rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          >span:nth-child(1) {
            font-size: .266667rem;
            color: #fff;
            font-weight: bold;
          }
          >span:nth-child(2) {
            font-size: .32rem;
            color: #fff;
          }
        }
      }

      .userFooter {
        width: 100%;
        height: 1.12rem;
        .content {
          width: 9.066667rem;
          height: 1.12rem;
          background: linear-gradient(to right, #26294b, #324177);
          margin: 0 auto;
          border-radius: .426667rem .426667rem 0 0;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 8.6rem;
            height: .64rem;
          }
        }
      }
    }

    .order {
      width: 100%;
      height: 2.346667rem;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 .4rem;
      box-sizing: border-box;
      border-radius: .25rem .25rem 0 0;
      >div {
        width: 1.6rem;
        height: 1.333333rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        img {
          width: .6rem;
          height: .533333rem;
        }
        span {
          font-size: .293333rem;
          color: #333;
        }
      }
    }

    .money {
      margin: .4rem 0;
      width: 100%;
      height: 2.133333rem;
      background-color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 .4rem;
      box-sizing: border-box;
      border-radius: .25rem .25rem 0 0;
      >div {
        width: 1.6rem;
        height: 1.333333rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        img {
          width: .6rem;
          height: .533333rem;
        }
        span {
          font-size: .293333rem;
          color: #333;
        }
      }
    }

    footer {
      width: 100%;
      .title {
        width: 100%;
        height: 1rem;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        font-size: .373333rem;
        color: #2e2d2d;
        font-weight: bold;
        line-height: 1rem;
        text-indent: .373333rem;
      }
      .serve {
        width: 100%;
        height: 4rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 0 .4rem;
        box-sizing: border-box;
        border-radius: .25rem .25rem 0 0;
        >div {
          width: 1.6rem;
          height: 1.333333rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          margin: 0 .133333rem;
          img {
            width: .6rem;
            height: .533333rem;
          }
          span {
            font-size: .293333rem;
            color: #333;
          }
        }
      }
    }
  }
}

</style>